<template>
  <page-wrap>
    <search-wrap
      :schema="searchSchema"
      @reset="setSearchParams"
      @search="setSearchParams"
    />
    <table-wrap
      :columns="tableColumns"
      :data="dataList"
      :pagination="pagination"
      :loading="loading"
      @register="tableRegister"
    >
    </table-wrap>
  </page-wrap>
</template>
<script setup lang="ts">
  import { listApi } from '@/api/system/oper-log';
  import { useTable } from '@/hooks/table';

  const { tableRegister, tableState, tableMethods } = useTable({
    fetchDataApi: async () => {
      const { pageParams } = tableState;
      return await listApi({
        ...pageParams.value,
        ...unref(searchParams),
      });
    },
  });

  const { dataList, loading, pagination } = tableState;
  const { getList } = tableMethods;

  const tableColumns = reactive<TableColumn[]>([
    {
      field: 'index',
      title: '序号',
      type: 'index',
    },
    {
      field: 'title',
      title: '标题',
    },
    {
      field: 'logType',
      title: '操作类型',
      type: 'enumTag',
      enumName: 'LogType',
    },
    {
      field: 'clientType',
      title: '客户端',
      type: 'enumTag',
      enumName: 'ClientType',
    },
    {
      field: 'username',
      title: '用户名',
    },
    {
      field: 'ip',
      title: 'IP',
    },
    {
      field: 'url',
      title: '请求地址',
    },
    {
      field: 'requestMethod',
      title: '请求方式',
    },
    {
      field: 'requestParam',
      title: '请求参数',
    },
    {
      field: 'errorMsg',
      title: '错误消息',
    },
    {
      field: 'createTime',
      title: '操作时间',
      width: 200,
    },
  ]);

  const searchSchema = reactive<FormSchema[]>([
    {
      field: 'logType',
      label: '操作类型',
      type: 'Select',
      enumName: 'LogType',
    },
    {
      field: 'clientType',
      label: '客户端',
      type: 'Select',
      enumName: 'ClientType',
    },
  ]);

  const searchParams = ref({});

  const setSearchParams = (data: any) => {
    searchParams.value = data;
    getList(false);
  };
</script>
